<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .tilte{
            color: yellow;
        }
    </style>
</head>
<body>
   <div id="app">

            <!--  :style="key：value"   key 代表css的属性 value代表属性值 -->
            <span :style="{fontSize:fontSize+'px',color:color}">{{message}}</span><br/>
            <span :style="getStyle()">{{message}}</span><br/>
            <span :style="[fontSize1,colorJson]">{{message}}</span><br/>
       </div>

        <!--

         class ,style 绑定  对象绑定，数组绑定 常用的对象绑定
         -->
       <script src="js/vue.js"></script>
       <script>
         const app=new Vue({
           el: '#app',
           data: {
             message:'你好vue',
             fontSize:100,
             color:'green',
             fontSize1:{
                 fontSize:'100px'
             },
             colorJson:{
                 color:'yellow',
             }
           },
           methods:{
               getStyle:function(){
                   return {fontSize:this.fontSize+'px',color:this.color};
               }
           }
         })
       </script>
</body>
</html>